<template xmlns="">
  <div class="registerInfo-container">
    <modules-title title-name="入库日志">
      <template slot="btn">
        <el-button class="border-btn" @click="templateDrug">导出</el-button>
        <el-button class="border-btn" @click="back">返回</el-button>
      </template>
    </modules-title>
    <div class="main">
      <div class="searchBar">
        <el-form inline :model="storage">
          <el-form-item label="日期">
            <el-date-picker
              v-model="date"
              class="searchBar_picker1"
              type="daterange"
              range-separator="-"
              @change="changeDate"
              @input="clearTime"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input
              class="searchBar_input"
              placeholder="入库单号/商品名称/厂家名称"
              @blur="blurIn($event)"
              @clear="clearIn"
              @keyup.enter.native="enterKey"
              clearable
              v-model="storage.key">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="药品分类">
            <el-select v-model="storage.category_id" @change="changeCategory" class="searchBar_select">
              <el-option
                v-for="item in category"
                :key="item.ID"
                :label="item.category_name"
                :value="item.ID"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item v-if="state.drugs_management.function_set" label="批号">
            <el-input
              clearable
              @change="changeIn"
              @clear="clearPc"
              class="searchBar_picker"
              placeholder="批号"
              v-model="storage.batch_no">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item label="供货商">
            <el-input
              class="searchBar_picker"
              placeholder="供货商"
              @change="changeSu"
              clearable
              v-model="storage.supplier">
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" class="main-btn" @click="search">查询</el-button>
            <el-button class="border-btn" @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-table
          :data="tableData"
          border
          :default-sort="{prop: 'created_at', order: 'descending'}"
          :header-cell-style="{
                        backgroundColor: '#F5F5F5',
                        color: '#333333',
                        fontFamily: 'MicrosoftYaHeiUI',
                        fontSize: '14px',
                        fontWeight: 900,
                    }"
        >

          <el-table-column label="入库日期" prop="created_at" sortable align="center" width="180">
            <template #default="{row}">
              {{row.created_at | dateFormat}}
            </template>
          </el-table-column>
          <el-table-column prop="id" label="入库单号" align="center"></el-table-column>
          <el-table-column prop="product_name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="category_name" label="药品分类" align="center"></el-table-column>
          <el-table-column prop="pack" label="规格" align="center"></el-table-column>
          <el-table-column prop="production" label="生产厂家" align="center"></el-table-column>
          <el-table-column prop="supplier" label="供应商" align="center"></el-table-column>
          <el-table-column prop="batch_no" label="批号" v-if="state.drugs_management.function_set"
                           align="center"></el-table-column>
          <el-table-column label="进货价" align="center">
            <template #default="{row}">
              <span class="price">  {{row.buy_price | moneyFormat}} <span v-if="row.unit">元/</span>{{row.unit}}</span>
            </template>
          </el-table-column>
          <el-table-column label="入库数量" align="center">
            <template #default="{row}">
              {{row.number}} {{row.number_unit}}
            </template>
          </el-table-column>
          <!--          <el-table-column label="金额" align="center">-->
          <!--            <template #default="{row}">-->
          <!--              ￥{{row.price}}-->
          <!--            </template>-->
          <!--          </el-table-column>-->
        </el-table>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="storage.pager.number"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="storage.pager.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {getCategoryList, getStoragerList, exportPutDownload} from '@/api/drugsManagement';
  import {secondToDate, conversionTime} from "@/utils/formatter"
  import Templates from "../../clinicManagement/index";

  export default {
    name: "storageLog",
    components: {Templates},
    data() {
      return {
        date: '',
        storage: {//入库
          batch_no: '',//批次号
          category_id: 0,//分类id
          supplier: '',//供应商
          start: '',
          end: '',
          key: '',
          pager: {
            number: 1,
            size: 10
          }

        },
        category: [],//分类
        tableData: [],
        total: 0,
        state: {},
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },

      }
    },
    created() {
      this.state = JSON.parse(this.$store.getters.systemSetting.dic_value)
      this.getCategoryListData()
      this.getStoragerListData()
    },
    methods: {
      //获取药品分类
      getCategoryListData() {
        getCategoryList().then(res => {
          if (res.code === 200) {
            this.category = res.data || []
          }
        })
      },
      //获取列表数据
      getStoragerListData() {
        getStoragerList(this.storage).then(res => {
          if (res.code === 200) {
            this.total = res.data.total
            this.tableData = res.data.data || []
          }
        })
      },
      //时间事件
      changeDate(e) {
        if (e !== null && e.length > 0) {
          let date = conversionTime(e)
          this.storage.start = date[0]
          this.storage.end = date[1]
        }
      },
      //时间清除
      clearTime(e) {
        this.$nextTick(() => {
          if (e == null) {
            this.storage.start = ''
            this.storage.end = ''
            this.storage.pager.number = 1
            this.getStoragerListData()
          } else {
            // this.$set(this, "date", [date[0], date[1]]);
            let date = conversionTime(e)
            this.storage.start = date[0]
            this.storage.end = date[1]
            this.storage.pager.number = 1
            this.getStoragerListData()
          }

        })
      },
      //key事件
      blurIn(val) {
        this.storage.key = val.target.value
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //key清除事件
      clearIn() {
        this.storage.key = ''
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //key回车
      enterKey(e) {
        let keyCode = window.event ? e.keyCode : e.which
        if (keyCode === 13 && this.storage.key) {
          this.storage.pager.number = 1
          this.getStoragerListData()
        }
      },
      //分类事件
      changeCategory(val) {
        this.storage.category_id = Number(val)
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //批次号
      changeIn(val) {
        this.storage.batch_no = val
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //批次号清除
      clearPc() {
        this.storage.batch_no = ''
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      changeSu(e) {
        if (e === null) {
          this.storage.supplier = ''
          this.storage.pager.number = 1
          this.getStoragerListData()
        } else {
          this.storage.supplier = e
          this.storage.pager.number = 1
          this.getStoragerListData()
        }
      },
      //查询
      search() {
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //重置
      reset() {
        this.date = ''
        this.storage = {//入库
          batch_no: '',//批次号
          category_id: 0,//分类id
          supplier: '',//供应商
          start: '',
          end: '',
          key: '',
          pager: {
            number: 1,
            size: 10
          }
        }
        this.storage.pager.number = 1
        this.getStoragerListData()
      },
      //条数
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.storage.pager.size = val
        this.getStoragerListData()
      },
      //页码
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.storage.pager.number = val
        this.getStoragerListData()
      },
      back() {
        this.$router.go(-1)
      },
      async templateDrug() {
        const res = await exportPutDownload();
        const link = document.createElement("a");
        let blob = new Blob([res], {
          type:
            "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        });
        link.style.display = "none";
        link.href = URL.createObjectURL(blob);
        link.download = '入库日志';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "@/assets/scss/drugsManagement/storageLog.scss";
</style>
